<template>
  <div class="solution-publish-container">
    <div class="solution-publish-header">
      <h2>发布题解</h2>
      <div class="solution-publish-actions">
        <a-button type="outline" @click="goBack">
          <template #icon><icon-left /></template>
          返回
        </a-button>
        <a-button type="primary" :loading="publishing" @click="publishSolution">
          <template #icon><icon-send /></template>
          发布题解
        </a-button>
      </div>
    </div>

    <a-card class="solution-publish-form" :bordered="false">
      <a-form :model="publishForm" layout="vertical">
        <a-form-item field="title" label="标题" required>
          <a-input v-model="publishForm.title" placeholder="请输入题解标题" allow-clear />
        </a-form-item>

        <a-form-item field="tags" label="标签">
          <a-select
            v-model="publishForm.tags"
            placeholder="请选择标签"
            allow-create
            allow-clear
            multiple
            :loading="tagsLoading"
          >
            <a-option 
              v-for="tag in tagStore.tagList" 
              :key="tag.id" 
              :value="tag.name"
            >
              {{ tag.name }}
            </a-option>
          </a-select>
        </a-form-item>

        <a-form-item field="content" label="内容" required>
          <div class="editor-container">
            <MdEditor :value="publishForm.content" :onChange="updateContent" />
          </div>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { IconLeft, IconSend } from '@arco-design/web-vue/es/icon'
import MdEditor from '@/components/MdEditor.vue'
import { publishSolutionApi } from '@/api/problem/solution'
import { useTagStore } from '@/stores/tag'

// 路由
const route = useRoute()
const router = useRouter()
const problemId = Number(route.query.problemId || 0)

// 检查是否有效的问题ID
if (!problemId) {
  Message.error('无效的题目ID')
  router.push('/problem')
}

// 使用标签存储
const tagStore = useTagStore()
// 标签加载状态
const tagsLoading = ref(false)

// 表单数据
const publishForm = ref({
  title: '',
  content: '',
  tags: []
})

// 发布状态
const publishing = ref(false)

// 获取标签列表
const fetchTags = async () => {
  tagsLoading.value = true
  await tagStore.fetchAllTags()
  tagsLoading.value = false
}

// 更新内容
const updateContent = (content: string) => {
  publishForm.value.content = content
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 发布题解
const publishSolution = async () => {
  // 表单验证
  if (!publishForm.value.title.trim()) {
    Message.warning('请输入题解标题')
    return
  }

  if (!publishForm.value.content.trim()) {
    Message.warning('请输入题解内容')
    return
  }

  publishing.value = true
  
  try {
    const res = await publishSolutionApi({
      problemId,
      title: publishForm.value.title,
      content: publishForm.value.content,
      tags: publishForm.value.tags
    })
    
    if (res && res.code === 0) {
      Message.success('题解发布成功')
      // 返回题目详情页
      router.push(`/problem/${problemId}`)
    } else {
      Message.error(res?.message || '发布题解失败')
    }
  } catch (error: any) {
    console.error('发布题解失败', error)
    Message.error(error.message || '发布题解失败，请稍后再试')
  } finally {
    publishing.value = false
  }
}

// 组件挂载时获取标签
onMounted(() => {
  fetchTags()
})
</script>

<style scoped>
.solution-publish-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.solution-publish-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.solution-publish-actions {
  display: flex;
  gap: 12px;
}

.solution-publish-form {
  margin-bottom: 24px;
}

.editor-container {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  width: 100%;
}

:deep(.bytemd) {
    width: 100%;
  height: 500px;
  border: none;
}
</style> 